<!-- 媒体显示组件，支持显示图片和视频 -->
<template>
    <div>
        <el-image v-if="type == 'image'"
                  style="width: 100px; height: auto"
                  fit="contain"
                  :src="url"
                  :preview-src-list="previewSrcList">
        </el-image>
        <video v-else
               style="width: 100px; height: auto"
               :src="url"
               controls
               class="video"
               width="100%">
        </video>
    </div>
</template>

<script>
export default {
    name: "media-show",
    data() {
        return {
            type: '',
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        url: String,
        previewSrcList: {
            type: Array,
            default: () => [],
        }
    },
    methods: {
        init() {
            if (this.url) {
                if (this.url.indexOf('.mp4') !== -1) {
                    this.type = 'video'
                } else {
                    this.type = 'image'
                }
            }
        }
    },
    watch: {
        url: function (val, oldVal) {
            this.url = val;
            this.init();
        }
    },
    created() {
        this.init();
    },
}
</script>

<style scoped>

</style>
